<template>
  <div class="storerm">
    <IEcharts
      :loading="loading"
      :option="option"
      @ready="onReady"
    />
  </div>
</template>

<style>
  /**
   * 默认尺寸为 600px×400px，如果想让图表响应尺寸变化，可以像下面这样
   * 把尺寸设为百分比值（同时请记得为容器设置尺寸）。
   */
  .storerm {
    width: 100%;
    height: 200px;
    /*margin: 3px 0;*/
    background: #fff;
  }
</style>

<script type="text/babel">
  import IEcharts from 'vue-echarts-v3/src/full.js';
  export default {
    name: 'RingChart',
    components: {
      IEcharts
    },
    props: [
      'srdata',
      'srdata2',
      'type',
      'codes'
    ],
    data() {
      let that = this;
      return {
        loading: true,
        option: {
          title: {
            text: '生产情况',
            textStyle: {
              fontSize: 14,
              fontWeight: 100,
            },
            top: 5
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c}吨 ({d}%)',
            position: 'top'
          },
          // legend: {
          //   orient: 'vertical',
          //   left: 10,
          //   data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度']
          // },
          series: [
            {
              name: '',
              type: 'pie',
              selectedMode: 'single',
              radius: [0, '30%'],
              center: ['30%', '50%'] ,
              label: {
                show: true,
                position: 'inner'
              },
              labelLine: {
                show: false
              },
              data: []
            },
            {
              name: '',
              type: 'pie',
              label: {
                show: false,
                position: 'inside',
              },
              radius: ['45%', '60%'],
              center: ['30%', '50%'] ,
              data: []
            }
          ]
        },
        instance: ''
      }
    },
    mounted() {
      this.option.series[0].data = this.srdata;
      this.option.series[1].data = this.srdata2;
    },
    watch: {
      'srdata': function (val) {
        this.option.series[0].data = this.srdata;
        this.option.series[1].data = this.srdata2;
      }
    },
    methods: {
      setSrdata: function() {},
      onReady: function(instance, ECharts) {
        this.loading = false;
      },
    }
  };
</script>
